<template>
  <div class="">
    <div class="">
      <div class="common_title pad_b20">公告管理</div>
      <el-form :model="queryParams" ref="queryForm" class="margin_t20"  label-width="90px">
        <el-row class="flex flex_w">
          <FormItem label="搜索关键词" class="" type="input" :form="queryParams" @keyenter="handleQuery" prop="keywords" clearable />
          <div class="search_btns pad_l20">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </div>
        </el-row>
      </el-form>
      <div class="common_line"></div>
      <div class="common_button flex_ac">
        <div class="right_button margin_a flex">
          <a href="javascript:;" class="color_blue " @click="handleUpdate" v-if="have_auth('/system/notice/add')"><img src="@/assets/add.png" class="btn_img">新增</a>
          <a href="javascript:;" class="color_red" @click="handleDelete('','delete','删除')" v-if="have_auth('/system/notice/del')"><img src="@/assets/dele.png" class="btn_img">删除</a>
        </div>
      </div>
    </div>
    <div class="common_block_div">
      <el-table v-loading="loading" :data="list"  border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="公告标题" align="left" prop="title"  />
        <el-table-column label="公告描述" align="left" prop="description"  />
        <el-table-column label="发布时间" align="left" prop="create_time"  />
        <el-table-column label="发布人" align="center" prop="author" width="120" />
        <el-table-column label="状态" align="center" prop="is_hid" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.is_hid==0" size="mini">启用</el-tag>
            <el-tag type="warning"v-if="scope.row.is_hid!=0" size="mini">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetail(scope.row)"  v-if="have_auth('/system/notice/read')">详情</el-button>
            <el-button type="text" size="small" @click="handleUpdate(scope.row)"  v-if="have_auth('/system/notice/edit')">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row,'delete','删除')"  v-if="have_auth('/system/notice/del')">删除</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row,'enable','启用')"  v-if="have_auth('/system/notice/enable') && scope.row.is_hid!=0">启用</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row,'disable','禁用')"  v-if="have_auth('/system/notice/disable') && scope.row.is_hid==0">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      />
    </div>

   <!-- 上传图片预览 -->
   <el-dialog  :close-on-click-modal="false" append-to-body @closed="uploadImageUrl=''" width="600px" :visible.sync="uploadImgVisible">
     <img style="width: 100%;" :src="uploadImageUrl" alt="">
   </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: 'needCache',
  data () {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      activeName:'1',  // 1进行中 2 已结束
      loading: true,
      total: 0,
      // 定时任务表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 16
      },
      openOptions: [],
      open:false,
      queryParams2:{},
      // 上传图片
      uploadImageUrl: '',
      uploadImgVisible: false
    }
  },
  activated() {
    this.get_options()
    this.getList();
  },
  methods:{

    // 上传图片--s
    PicturePreview(url) {
      this.uploadImageUrl = url;
      this.uploadImgVisible = true;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    handleDetail(row){
      this.$router.push({ //核心语句
        path: '/system/notice_detail?id='+(row.id || ''),
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row){
      this.$router.push({ //核心语句
        path: '/system/add_notice?id='+(row.id || ''),
      })
    },
    get_options(){
       const _this=this;
       // _this.axios.get("/api/Article/getTypeOption", {params:{}}).then(function(res) {
       //    if(res){
       //      _this.openOptions=res.data
       //    }
       // }).catch(function(error) {
       //   console.log(error);
       // })
    },
    /** 删除按钮操作 */
    handleDelete(row,type,text) {
      const _this=this;
      const ids = row.id?[row.id]:_this.ids;
      if(ids.length==0){
        _this.$message.error('请选择要操作的数据');
        return false;
      }
      let _data
      if(type=='delete'){
        _data={ids:ids}
      }else{
        _data={id:ids[0]}
      }
      this.$confirm('是否确认'+text+'?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          _this.axios.post("/api/Article/"+type, _data).then((res) => {
              if (res) {
                  _this.getList();
                  _this.$message.success('操作成功');
              }
          }).catch((err) => {
              console.log(err);
          });
        })
    },
    /** 查询定时任务列表 */
    getList() {
      const _this=this;
      this.loading = true;
      _this.axios.get("/api/Article/index", {params:this.queryParams}).then(function(res) {
        if(res){
          _this.list = res.data.data;
          _this.total = res.data.total;
          _this.loading = false;
          // _this.openOptions=_this.obj2arr(res.message.search.status)
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams={
        page: 1,
        limit: 16
      }
      this.handleQuery();
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title{line-height: 44px; font-size: 20px;}
</style>
